
import { Canvas, Meta, Story, ArgsTable, Source } from '@storybook/addon-docs';
import BadgeState from '@/pkg/rancher-components/src/components/BadgeState/BadgeState';

<Meta 
  title="Components/Badge" 
  component={BadgeState}
  argTypes={{
    color: {
      description: 'Overwritten description',
      control: {
        type:    'select',
        options: ['bg-info', 'bg-warning', 'bg-error']
      },
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  components: { BadgeState },
  props:      Object.keys(argTypes),
  template:   '<BadgeState v-bind="$props" />',
})


# Badge

Badges are used to highlight important changes of state in an element, mark them, or draw attention to counters.

<br/>

### Description

- Use badges to highlight or differentiate key elements. However, do it with caution. Drawing attention to many pieces may result in creating much noise.
- Badges are good for counters, for example, to show the number of new messages.
- Badges should not provide interaction. However, its parent element may.
- Don't use long texts within a badge. Whenever possible, limit it to a maximum of 3 words or less. 


Different contextual variations of the badge can be used to communicate the different states of an element or the content: Blue for information, yellow for warning and red for errors.

<Canvas>
  <Story
    name="Info"
    args={{
      label: 'Hello world',
      color: 'bg-info'
    }}>
    {Template.bind({})}
  </Story>
  <Story
    name="Warning"
    args={{
      label: 'Hello World',
      color: 'bg-warning'
    }}>
    {Template.bind({})}
  </Story>
  <Story
    name="Error"
    args={{
      label: 'Hello World',
      color: 'bg-error'
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Import

<Source
  language='js'
  light
  format={false}
  code={`
     import BadgeState from '@/pkg/rancher-components/src/components/BadgeState/BadgeState';
  `}
/>

### Props table

<ArgsTable of={BadgeState} />

